<template>
  <!-- 2023年4月4日 孔德嘉 diy商品详情页面 -->
  <div style="padding-top: 50px; margin-bottom: 50px">
    <div class="center" style="width: 60%; margin: 0 auto">
      <button class="go_back" @click="goBack()">返回</button>
      <el-row
        style="border: 1px solid #e8e8e8; padding: 20px 2%; margin-bottom: 30px"
      >
        <!-- 左边轮播图 -->
        <el-col :span="12">
          <!-- 大图 -->
          <div class="carousel-container banner">
            <el-carousel
              :interval="5000"
              class="banner_center"
              v-if="diyInfo && diyInfo.diyDetailsImageId"
            >
              <!-- 中心图片 -->
              <el-carousel-item
                class="banner_center_c"
                v-for="(item, index) in diyInfo.diyDetailsImageId.split(',')"
                :key="index"
              >
                <!-- 里面的图片 -->
                <el-image
                  class="banner_center_img"
                  fit="cover"
                  :src="
                    $imageUrl+'?id=' + item
                  "
                ></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <!-- 右边商品详情  -->
        <el-col :span="10" class="content">
          <div>
            <!-- 商品名称 -->
            <p class="diy_name">
              {{ diyInfo.diyName }}
            </p>
            <!-- 价格&销量 -->
            <div class="diy_smPrice_v">
              <p style="margin: 0 0 6px 0; height: 30px">
                <!-- 优惠 -->
                <span class="diyCommodityDiscountPrice">
                  <span>￥</span>
                  <span class="price1">{{ diyInfo.price }}</span>
                  <span class="price1_but" v-if="diyInfo.priceType == 1"
                    >优惠价</span
                  >
                  <!-- 会员价 -->
                  <!-- <span
                    style="
                      height: 20px;
                      line-height: 20px;
                      padding: 3px 14px;
                      border-radius: 10px;
                      color: #fff200;
                      background: #000000;
                      font-weight: 700;
                      margin-left: 10px;
                    "
                    v-if="diyInfo.diyCommodityVipPrice"
                  >
                    <span style="font-size: 14px">VIP价格:</span>
                    <span
                      style="
                        font-size: 18px;
                        display: inline-block;
                        vertical-align: middle;
                      "
                      >{{ diyInfo.diyCommodityVipPrice }}</span
                    >
                    </span
                  > -->
                </span>
                <!-- 销量 -->
                <span class="diy_volume">销量：{{ diyInfo.salesVolume }}</span>
              </p>
              <!-- 原价 -->
              <span class="price0" v-if="diyInfo.priceType == 1">
                <span>价格￥{{ diyInfo.diyPrice }}</span>
              </span>
            </div>
            <!-- 商品详情 -->
            <el-tabs class="diyContent">
              <el-tab-pane label="商品详情">
                <p style="height: 32px; overflow: hidden">
                  <span class="diyContent_title">商品服务</span
                  ><span class="diyContent_title2">{{
                    diyInfo.diyDetails
                  }}</span>
                </p>
                <p>
                  <span class="diyContent_title">推荐人数</span
                  ><span class="diyContent_title2">{{
                    diyInfo.recommendedPeopleNumber
                  }}</span>
                </p>
                <p v-if="diyInfo && diyInfo.recommendedScenarios">
                  <span class="diyContent_title">推荐场景</span>
                  <span class="diyContent_title2">
                    <span
                      class="recommendedScenarios"
                      v-for="(
                        item, index
                      ) in diyInfo.recommendedScenarios.split(',')"
                      :key="index"
                      >{{ item }}</span
                    ></span
                  >
                </p>
              </el-tab-pane>
              <el-tab-pane label="购买须知">
                <p>
                  <span class="diyContent_title">预约信息</span
                  ><span class="diyContent_title2">{{
                    diyInfo.detailsOfPurchaseInstructions
                  }}</span>
                </p>
                <p>
                  <span class="diyContent_title">温馨提示</span
                  ><span class="diyContent_title2"
                    >如需商品发票，请您消费时向商户咨询为了保障您的权益，建议使用乐工坊
                    官网、小程序线上支付。若产生其他
                    支付方式纠纷，乐工坊不承担任何责任， 感谢您的理解和支持！
                  </span>
                </p>
              </el-tab-pane>
            </el-tabs>
            <!-- 收藏 -->
            <el-button class="shoucang">
              <!-- 未收藏 -->
              <span v-if="isCollection == false">
                <span @click="toYesCollection">
                  <!--未收藏 -->
                  <svg
                    style="
                      display: inline-block;
                      vertical-align: middle;
                      margin-right: 3px;
                    "
                    t="1681094766692"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2615"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M509.606998 143.114488c9.082866 0 17.327644 4.840238 20.996197 12.331863l97.262184 197.441814c5.613858 11.403724 16.663518 19.358907 29.438473 21.216207l223.738737 32.552393c8.420787 1.215688 15.604396 6.851035 18.23327 14.254655 2.520403 7.18361 0.595564 15.062044-5.084808 20.586874L730.253304 601.611947c-8.949836 8.751315-12.994965 21.171182-10.916631 33.370015l38.011732 222.060515c1.325182 7.737218-2.165316 15.426341-8.905834 19.978007-4.088108 2.741437-8.861832 4.155646-13.812587 4.155646-4.022617 0-7.999185-0.972141-11.425214-2.740414L528.149307 775.671215c-5.768377-3.006474-12.155854-4.552689-18.542308-4.552689-6.364965 0-12.727882 1.547239-18.518772 4.552689L296.254819 878.348736c-3.559059 1.855254-7.602142 2.828418-11.668761 2.828418-4.861728 0-9.723455-1.459235-13.546527-4.022617-6.961552-4.684696-10.475586-12.419867-9.127891-20.155039l38.011732-222.016513c2.078335-12.198833-1.988284-24.619724-10.939143-33.370015L125.02397 441.443038c-5.635347-5.492084-7.55814-13.348006-5.061272-20.453844 2.63092-7.481392 9.812483-13.116739 18.298761-14.332427l223.674269-32.552393c12.839423-1.857301 23.867594-9.813506 29.481452-21.216207l97.194646-197.396789C492.325403 147.965983 500.590648 143.114488 509.606998 143.114488M509.606998 104.904235c-24.043602 0-45.922912 13.226233-56.177464 33.95637L356.189863 336.302419l-223.674269 32.54216c-22.983457 3.304256-42.100864 18.718317-49.481971 39.659255-7.381108 21.048385-1.812275 44.23241 14.431687 60.033281l163.916257 160.125931-38.011732 222.016513c-3.868097 22.408359 6.03239 44.819788 25.458835 57.94676 10.69662 7.116071 23.204491 10.784624 35.757388 10.784624 10.298554 0 20.663622-2.475378 30.055526-7.337105l194.987926-102.7205L704.662463 912.072815c9.369392 4.861728 19.712971 7.337105 29.990035 7.337105 12.57541 0 25.082258-3.668553 35.778878-10.784624 19.426445-13.126972 29.305443-35.538401 25.460882-57.94676l-38.012755-222.016513 163.937746-160.125931c16.22145-15.812127 21.810748-38.984896 14.408151-60.033281-7.402597-20.940938-26.51898-36.353976-49.503461-39.659255L663.04767 336.302419l-97.240695-197.441814C555.619962 118.131491 533.695626 104.904235 509.606998 104.904235L509.606998 104.904235z"
                      fill="#5D5D5D"
                      p-id="2616"
                    ></path>
                  </svg>
                  <span
                    style="
                      font-size: 14px;
                      display: inline-block;
                      vertical-align: middle;
                      color: rgb(102, 102, 102);
                    "
                    >收藏</span
                  >
                </span>
              </span>
              <!-- 已收藏 -->
              <span v-else>
                <span @click="toNoCollection">
                  <svg
                    style="
                      display: inline-block;
                      vertical-align: middle;
                      margin-right: 3px;
                    "
                    t="1681095321677"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7999"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M946.44567 407.179676c-3.706415-11.056823-13.268188-19.154245-24.823362-20.929682l-263.117606-40.614L540.930913 93.91802c-5.108345-10.93198-16.071024-17.939581-28.155247-17.971303-0.030699 0-0.062422 0-0.062422 0-12.021801 0-22.985504 6.945179-28.155247 17.84646L365.79001 345.247138l-263.917832 39.507806c-11.399631 1.961678-20.774139 10.060123-24.355711 21.054525-3.613294 10.963703-0.778736 23.047926 7.257288 31.332612l191.202717 196.684568-45.6282 277.132808c-1.930979 11.741415 3.0208 23.608697 12.769838 30.491455 9.717316 6.882757 22.549575 7.630794 32.983205 1.868557l235.366565-129.47177 234.868215 130.282229c4.703115 2.616594 9.904581 3.924379 15.106046 3.924379 6.291287 0 12.551874-1.868557 17.877159-5.699816 9.748015-6.852058 14.763239-18.687618 12.862959-30.460756L747.488339 634.635061l191.669344-195.84341C947.286828 430.476265 950.121386 418.2365 946.44567 407.179676z"
                      fill="#2c2c2c"
                      p-id="8000"
                    ></path>
                  </svg>
                  <span
                    style="
                      font-size: 14px;
                      display: inline-block;
                      vertical-align: middle;
                      color: rgb(102, 102, 102);
                    "
                    >已收藏</span
                  >
                </span>
              </span>
            </el-button>
            <el-button
              round
              style="width: 180px; display: inline-block"
              @click="goSubmit"
              class="btn"
              >立即购买</el-button
            >
            <el-button
              round
              style="width: 180px; display: inline-block"
              @click="toAddCar()"
              class="btn add_car"
              >加入购物车</el-button
            >
          </div>
        </el-col>
      </el-row>
      <!-- 评价&商家 -->
      <div
        class="center_bottom"
        style="border: 1px solid #e8e8e8; padding: 20px 2%"
      >
        <!-- 评价模块 -->
        <div class="appraise">
          <p class="appraise_header">
            <span class="appraiseNum">{{ appraiseNum }}</span>
            <span class="appraiseNum_title">条商品评价</span>
            <span class="star">
              <!-- 星级 -->
              <el-rate
                style="display: inline-block"
                v-model="diyInfo.diyGrade"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate
            ></span>
          </p>
          <!-- 小提示 -->
          <p class="tips">如需商品发票，请消费时向商户咨询</p>
          <!-- 评价列表 -->
          <div
            class="appraiseList"
            v-for="(item, index) in appraiseList"
            :key="index"
          >
            <!-- 评价内容 -->
            <p class="appraise_content">
              {{ item.content }}
            </p>
            <!-- 评论照片 -->
            <el-row class="appraise_imgs" v-if="appraiseList && item.imgs">
              <el-col class="appraise_img_d" :span="4" v-if="item.video">
                <Video
                  v-show="true"
                  :videoUrl="
                    'http://101.43.223.224:8765/image/getVideoById?id=' +
                    item.video
                  "
                  :width="100"
                  :height="100"
                  :autoplay="true"
                  :controls="true"
                  :loop="false"
                  :muted="false"
                  preload="auto"
                  :showPlay="true"
                  :playWidth="24"
                  zoom="cotain"
                ></Video>
              </el-col>
              <el-col
                class="appraise_img_d"
                :span="4"
                v-for="(imgId, index) in item.imgs.split(',')"
                :key="index"
              >
                <el-image
                  :preview-src-list="item.srcList"
                  class="appraise_img"
                  :src="
                    $imageUrl+'?id=' + imgId
                  "
                  fit="cover"
                ></el-image>
              </el-col>
            </el-row>
            <!-- 评价用户 -->
            <div class="appraiseContent">
              <!-- 头像 -->
              <span class="appraise_userAv">
                <el-avatar
                  class="appraise_userAv_a"
                  :src="item.avUrl"
                ></el-avatar>
              </span>
              <!-- name -->
              <span class="appraise_userName">
                {{ item.userName }}
              </span>
              <!-- 发布日期 -->
              <span class="appraise_date">
                {{ item.createTime }}
              </span>
            </div>
          </div>
          <div v-if="!total" class="no_appraise">
            <el-empty description="暂无评论"></el-empty>
          </div>
          <!-- 分页 -->
          <el-pagination
            v-if="total"
            @current-change="upPageNum"
            :current-page.sync="currentPage4"
            :page-size="pageRequest.pageSize"
            background
            layout="prev, pager, next"
            :total="total"
            style="margin-top: 30px; text-align: center"
          >
          </el-pagination>
        </div>
        <!-- 商家信息 -->
        <MerchantInfo></MerchantInfo>
      </div>
    </div>
  </div>
</template>

<script>
import Video from "@/components/diy/Video";
import MerchantInfo from "@/components/map/MerchantInfo.vue";
export default {
  name: "DIYView",
  mounted() {
    // 查询DIY商品信息
    this.getHandworkDiyById();
    //根据diyId查询评论数量
    this.calculateTheTotalNumberOfComments();
    //根据diyid查看diy商品所有评论
    this.queryAllComments();
    // 获取diy商品收藏状态
    this.getCollectionStatus();
  },
  data() {
    return {
      //收藏状态
      isCollection: false,
      //提交订单  数组
      DIYArr: [],
      //用户id
      userId: window.sessionStorage.getItem('userId'),
      // token
      token: window.sessionStorage.getItem('token'),
      // 分页显示第几页
      currentPage4: 1,
      pageRequest: {
        // 分页请求参数
        pageSize: 10, // 每页条数
        pageNum: 1, // 当前页
      },
      total: 0, // 分页总条数
      //评论数量
      appraiseNum: 0,
      // diy商品id
      diyId: this.$route.query.diyId,
      //diy商品信息
      diyInfo: {},
      // diy商品评价
      appraiseList: [],
    };
  },
  components: {
    MerchantInfo,
    Video,
  },
  methods: {
    //获取收藏状态
    getCollectionStatus() {
      //获取diyId 获取UserId
      this.$axios
        .get("/handworkDiyCollection/selectIsCollection", {
          params: {
            userId: this.userId,
            diyCommodityId: this.diyId,
          },
        })
        .then((res) => {
          //获取收藏状态
          if (res.data.data) {
            this.isCollection = true;
          } else {
            this.isCollection = false;
          }
        })
        .catch((error) => {
          this.$message.error("获取Diy商品收藏状态失败！");
        });
    },
    //立即购买
    goSubmit() {
      this.DIYArr.push({ id: this.diyId, number: 1 });
      // console.log(this.DIYArr);
      this.$router.push({
        path: "/SubmitOrder",
        query: {
          commodityArr: this.$Base64.encode(JSON.stringify([])),
          diyArr: this.$Base64.encode(JSON.stringify(this.DIYArr)),
        },
      });
      this.DIYArr = [];
    },
    // 添加到购物车
    toAddCar() {
      if (this.token !== null) {
        // 生成实体对象
        const commodityInfo = {
          userId: this.userId,
          diyId: this.diyId,
          businessName: "乐工坊",
          number: 1,
          isNoDiy: 1,
        };
        //添加请求
        this.$axios
          .post("/shoppingCart/saveShoppingCart", commodityInfo)
          .then((res) => {
            if (res.data.flag) {
              // console.log(res)
              this.$message.success("添加购物车成功！");
            }
          })
          .catch((error) => {
            this.$message.error("添加购物车失败！");
        });
      } else {
        this.$message.error("请先登录");
      }
      
    },
    //取消收藏商品
    toNoCollection() {
      //获取diyId 获取UserId
      const param2 = {
        userId: this.userId,
        handworkDiyId: this.diyId,
      };
      // 修改收藏状态
      this.$axios
        .post("/handworkDiyCollection/deleteByUserIdAndDiyId", param2)
        .then((res) => {
          //获取收藏状态
          if (res.data.data == 1) {
            //修改成功
            this.getCollectionStatus();
          } else {
            this.$message.error("修改Diy商品收藏状态失败！");
          }
        })
        .catch((error) => {
          this.$message.error("修改Diy商品收藏状态失败！");
        });
    },
    //收藏商品
    toYesCollection() {
      //获取diyId 获取UserId
      const param2 = {
        userId: this.userId,
        handworkDiyId: this.diyId,
      };
      // 修改收藏状态
      this.$axios
        .post("/handworkDiyCollection/insertHandworkDiyCollection", param2)
        .then((res) => {
          //获取收藏状态
          if (res.data.data == 1) {
            //修改成功
            this.getCollectionStatus();
          } else {
            this.$message.error("修改Diy商品收藏状态失败！");
          }
        })
        .catch((error) => {
          this.$message.error("修改Diy商品收藏状态失败！");
        });
    },
    //返回上一级
    goBack() {
      this.$router.go(-1);
    },
    //改变页码
    upPageNum(val) {
      this.pageRequest.pageNum = val;
      this.queryAllComments();
    },
    // 根据diyid查看diy商品所有评论
    queryAllComments() {
      //DIY商品信息
      this.$axios
        .get("/handworkDiy/queryAllComments", {
          params: {
            id: this.diyId,
            //分页条件
            pageSize: this.pageRequest.pageSize,
            pageNum: this.pageRequest.pageNum,
          },
        })
        .then((res) => {
          this.appraiseList = res.data.data.content;
          //条数
          this.total = res.data.data.totalSize;
          if (this.appraiseList) {
            // 评论图片列表
            for (let index = 0; index < this.appraiseList.length; index++) {
              const srcList = [];
              //等imgs元素出现
              if (this.appraiseList[index].imgs) {
                //分割字符串
                const imgId = this.appraiseList[index].imgs.split(",");
                //拼接链接
                for (let index1 = 0; index1 < imgId.length; index1++) {
                  const element =
                    this.$imageUrl+'?id=' +
                    imgId[index1];
                  srcList.push(element);
                }
                //返回值给列表
                this.appraiseList[index]["srcList"] = srcList;
              }
            }
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取评论失败！");
        });
    },
    // 根据diyid获取 评论数量
    calculateTheTotalNumberOfComments() {
      //DIY商品信息
      this.$axios
        .get("/handworkDiy/calculateTheTotalNumberOfComments", {
          params: {
            id: this.diyId,
          },
        })
        .then((res) => {
          this.appraiseNum = res.data.data;
        })
        .catch((error) => {
          this.$message.error("获取评论数量失败！");
        });
    },
    //   将轮播图指示器渲染成图片
    indicatorToimage() {
      this.$nextTick(() => {
        // 获取 小图片 列表
        // 创建dom
        const a = document.querySelectorAll(".el-carousel__button");
        const imgIds = this.diyInfo?.diyDetailsImageId?.split(",");
        if (imgIds) {
          //生成图片
          for (let i = 0; i < a.length && i < imgIds.length; i++) {
            const img = document.createElement("img");
            img.style.width = "50px";
            img.style.height = "50px";
            img.src = this.$imageUrl+`?id=${imgIds[i]}`;
            a[i].appendChild(img);
          }
        }
      });
    },
    // 根据diyid获取 DIY商品信息
    getHandworkDiyById() {
      //DIY商品信息
      this.$axios
        .get("/handworkDiy/getHandworkDiyById", {
          params: {
            id: this.diyId,
          },
        })
        .then((res) => {
          // 查询DIY的类型列表
          this.diyInfo = res.data.data;
          //在完全加载后再执行函数
          this.indicatorToimage();
        })
        .catch((error) => {
          this.$message.error("获取Diy商品失败！");
        });
    },
  },
};
</script>

<style scoped>
/*全局*/
p {
  margin: 6px 0;
}
.appraiseContent span {
  display: inline-block;
  vertical-align: middle;
  height: 40px;
  line-height: 40px;
}
/*上面问题*/
.carousel-container {
  width: 500px;
  height: 320px;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*选项卡*/
::v-deep .el-tabs__nav-wrap::after {
  width: 50%;
}
::v-deep .el-tabs__item.is-active {
  color: #303134;
  font-weight: 800;
}
::v-deep .el-tabs__active-bar {
  background-color: #303134;
}
::v-deep .el-tabs__item:hover {
  color: #303134;
  font-weight: 800;
}
.diyContent span {
  color: #868686;
  font-weight: 500;
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
}
::v-deep .el-tabs__content {
  padding-left: 30px;
  height: 100px;
  overflow: auto;
  height: 100px;
}
.diyContent_title {
  width: 20%;
  display: inline-block;
}
.diyContent_title2 {
  width: 80%;
  display: inline-block;
}
.recommendedScenarios {
  margin-right: 8px;
}
.el-button.is-round {
  border-radius: 20px;
  padding: 12px 23px;
  border: none;
  font-weight: 700;
  font-size: 18px;
  background: #ffffff;
}
/*评价&地图*/
.center_bottom > div {
  display: inline-block;
  vertical-align: top;
}
/*分页*/
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f7d448;
  color: #fff;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f7d448;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #f7d448;
}
/*收藏*/
.shoucang {
  height: 30px;
  padding: 0px 12px;
  border-radius: 20px;
  background: transparent;
  line-height: 30px;
  position: absolute;
  top: 122px;
  left: 320px;
}
.shoucang:hover {
  background: rgba(0, 0, 0, 0.06);
  transition: background-color 0.2s;
}
/*button*/
::v-deep .el-button {
  border: none;
}

.btn {
  width: 6.5em;
  height: 2.3em;
  background: white;
  color: black;
  border: none;
  border-radius: 0.625em;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.el-button.add_car {
  background-color: #000000;
  color: #fff200;
}
.el-button.add_car:after {
  background: #fff;
}
.el-button.add_car:hover {
  color: #000000;
}

.btn:hover {
  color: #fff200;
}

.btn:after {
  content: "";
  background: black;
  position: absolute;
  z-index: -1;
  left: -20%;
  right: -20%;
  top: 0;
  bottom: 0;
  transform: skewX(-45deg) scale(0, 1);
  transition: all 0.5s;
}

.btn:hover:after {
  transform: skewX(-45deg) scale(1, 1);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
/*轮播图*/
.banner {
  width: 100%;
}
.banner_center {
  width: 90%;
}
.banner_center_c {
  background: #ffffff;
  text-align: center;
}
.banner_center_img {
  width: 100%;
}

/* 轮播图样式 */
.preview-wrap .el-carousel {
  width: 350px;
  height: 400px;
}
.preview-wrap ::v-deep.el-carousel__button {
  width: 50px;
  height: 50px;
}
::v-deep .el-carousel__container {
  overflow: hidden;
  float: right;
  width: 80%;
  height: 320px;
}
::v-deep .el-carousel__button {
  height: 100%;
  width: 100%;
  display: inline-block;
  background: #fff;
}
::v-deep .el-carousel__indicators--horizontal {
  width: 50px;
  top: 0;
  left: 38px;
  width: 20%;
}
::v-deep .el-carousel__indicator--horizontal {
  padding: 0;
  height: 20%;
  width: 100%;
}
/*详情部分*/
.content > div {
  position: relative;
}
.diy_name {
  font-size: 20px;
  font-weight: 700;
  line-height: 21px;
  color: #3c3c3c;
  min-height: 21px;
  margin: 4px 0 14px 0;
}
.diy_smPrice_v {
  height: auto;
  width: 92%;
  background: #f5f5f5;
  padding: 10px 4%;
  margin-bottom: 10px;
}
/*优惠*/
.diyCommodityDiscountPrice {
  display: inline-block;
  height: 30px;
  width: 80%;
}
.diyCommodityDiscountPrice span {
  display: inline-block;
  vertical-align: middle;
}
.price1 {
  font-size: 24px;
  font-weight: 700;
  color: #000000;
}
.price1_but {
  height: 20px;
  line-height: 20px;
  padding: 3px 14px;
  font-size: 14px;
  border-radius: 10px;
  background: #fff200;
  font-weight: 700;
  margin-left: 14px;
}
/*销量*/
.diy_volume {
  display: inline-block;
  width: 20%;
  text-align: right;
  font-size: 14px;
  color: #a7a7a7;
  letter-spacing: -1px;
  height: 30px;
  line-height: 30px;
}
/*原价*/
.price0 {
  display: block;
  width: 100%;
  font-size: 12px;
  color: #a7a7a7;
  text-decoration: line-through;
}
/*评论*/
.appraise {
  width: calc(68% - 1px);
  margin-right: 2%;
  border-right: 1px solid rgb(232, 232, 232);
}
.appraise_header {
  height: 30px;
  line-height: 30px;
  color: #333;
}
.appraiseNum {
  font-size: 20px;
  font-weight: 700;
  margin-right: 6px;
}
.appraiseNum_title {
  font-size: 16px;
  color: #333;
  font-weight: 400;
}
.star {
  margin-left: 20px;
}
.tips {
  font-size: 12px;
  color: #3f3f3f;
  margin: 2px 0;
}
.appraiseList {
  padding: 10px 0 20px 0;
  border-bottom: 1px solid #e8e8e8;
}
.appraise_content {
  font-size: 16px;
  line-height: 20px;
  color: #000000;
}
.appraise_imgs {
  margin-top: 20px;
  margin-bottom: 10px;
}
.appraise_img_d {
  text-align: left;
}
.appraise_img {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}
.appraise_userAv {
  width: 40px;
  height: 40px;
  margin-right: 14px;
}
.appraise_userAv_a {
  width: 40px;
  height: 40px;
}
.appraise_userName {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #404040;
  line-height: 40px;
}
.appraise_date {
  width: 200px;
  height: 40px;
  margin-right: 10px;
  font-size: 12px;
  color: #b0b0b0;
  line-height: 40px;
}
.appraiseContent {
  margin-top: 20px;
}
.no_appraise {
}
/*返回上一级*/
.go_back {
  align-items: center;
  background-color: transparent;
  color: #000000;
  cursor: pointer;
  display: flex;
  font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  outline: 0;
  border: 0;
  padding: 1rem;
}

.go_back:before {
  background-color: #000000;
  content: "";
  display: inline-block;
  height: 1px;
  margin-right: 10px;
  transition: all 0.42s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 0;
}

.go_back:hover:before {
  background-color: #000000;
  width: 3rem;
}
</style>